<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%;margin: 0">
   <button id="renderPdf">DOWNLOAD PDF</button>
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
	   <script type="text/javascript" src="./js/html2canvas.js"></script>
	   <script type="text/javascript" src="./js/jsPdf.debug.js"></script>
       <script type="text/javascript">
	   
			var downPdf = document.getElementById("renderPdf");
	  

		  downPdf.onclick = function() {
		  
			var shareContent = document.body;
			//document.body;//需要截图的包裹的（原生的）DOM 对象
			var width = shareContent.offsetWidth; //获取dom 宽度
			var height = shareContent.offsetHeight; //获取dom 高度
			var canvas = document.createElement("canvas"); //创建一个canvas节点
			var scale = 2; //定义任意放大倍数 支持小数
			canvas.width = width * scale; //定义canvas 宽度 * 缩放
			canvas.height = height * scale; //定义canvas高度 *缩放
			canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
			var opts = {
				scale: scale, // 添加的scale 参数
				canvas: canvas, //自定义 canvas
				// logging: true, //日志开关，便于查看html2canvas的内部执行流程
				width: width, //dom 原始宽度
				height: height
			};
		  
			html2canvas(shareContent,{
			scale: scale, // 添加的scale 参数
				canvas: canvas, //自定义 canvas
				// logging: true, //日志开关，便于查看html2canvas的内部执行流程
				width: width, //dom 原始宽度
				height: height,
			  onrendered:function(data) {

				  //返回图片URL，参数：图片格式和清晰度(0-1)
				  var pageData = data.toDataURL('image/jpeg', 1.0);

				  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
				  var pdf = new jsPDF('', 'pt', [data.width, data.width]);
				  //var pdf = new jsPDF('', 'pt', 'a4');
				  //需要dataUrl格式
				  pdf.addImage(pageData, 'JPEG', 0, 0,data.width, data.height);
				  pdf.save('content.pdf');

			  }
			})
		  }
	   
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			app.title = '柱状图框选';

			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			var data3 = [];
			var data4 = [];

			for (var i = 0; i < 10; i++) {
				xAxisData.push('Class' + i);
				data1.push((Math.random() * 2).toFixed(2));
				data2.push(-Math.random().toFixed(2));
				data3.push((Math.random() * 5).toFixed(2));
				data4.push((Math.random() + 0.3).toFixed(2));
			}

			var itemStyle = {
				normal: {
				},
				emphasis: {
					barBorderWidth: 1,
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowColor: 'rgba(0,0,0,0.5)'
				}
			};

			option = {
				backgroundColor: '#eee',
				legend: {
					data: ['bar', 'bar2', 'bar3', 'bar4'],
					align: 'left',
					left: 10
				},
				brush: {
					toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
					xAxisIndex: 0
				},
				toolbox: {
					feature: {
						magicType: {
							type: ['stack', 'tiled']
						},
						dataView: {}
					}
				},
				tooltip: {},
				xAxis: {
					data: xAxisData,
					name: 'X Axis',
					silent: false,
					axisLine: {onZero: true},
					splitLine: {show: false},
					splitArea: {show: false}
				},
				yAxis: {
					inverse: true,
					splitArea: {show: false}
				},
				grid: {
					left: 100
				},
				visualMap: {
					type: 'continuous',
					dimension: 1,
					text: ['High', 'Low'],
					inverse: true,
					itemHeight: 200,
					calculable: true,
					min: -2,
					max: 6,
					top: 60,
					left: 10,
					inRange: {
						colorLightness: [0.4, 0.8]
					},
					outOfRange: {
						color: '#bbb'
					},
					controller: {
						inRange: {
							color: '#2f4554'
						}
					}
				},
				series: [
					{
						name: 'bar',
						type: 'bar',
						stack: 'one',
						itemStyle: itemStyle,
						data: data1
					},
					{
						name: 'bar2',
						type: 'bar',
						stack: 'one',
						itemStyle: itemStyle,
						data: data2
					},
					{
						name: 'bar3',
						type: 'bar',
						stack: 'two',
						itemStyle: itemStyle,
						data: data3
					},
					{
						name: 'bar4',
						type: 'bar',
						stack: 'two',
						itemStyle: itemStyle,
						data: data4
					}
				]
			};

			myChart.on('brushSelected', renderBrushed);

			function renderBrushed(params) {
				var brushed = [];
				var brushComponent = params.batch[0];

				for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
					var rawIndices = brushComponent.selected[sIdx].dataIndex;
					brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
				}

				myChart.setOption({
					title: {
						backgroundColor: '#333',
						text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
						bottom: 0,
						right: 0,
						width: 100,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						}
					}
				});
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
   </body>
</html>